import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import moment from 'moment';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Statistic, Modal, DatePicker, message, Spin, Progress, Input, InputNumber, Upload, Button, Layout, } from 'antd';
import styles from './index.less';
import download from '@/utils/download';
import { routerRedux } from 'dva/router';
import top from '@/assets/medicalKnowledge/top.png';
import topc from '@/assets/medicalKnowledge/top-c.png';
import axios from 'axios';
import iconc from '@/assets/icons/iconc.png';
import wen1 from '@/assets/knowlesgeSmartMaintenance/wen1.png';
import wen2 from '@/assets/knowlesgeSmartMaintenance/wen2.png';
import wen3 from '@/assets/knowlesgeSmartMaintenance/wen3.png';
import wen4 from '@/assets/knowlesgeSmartMaintenance/wen4.png';
import UserSession from "@/UserSession";
const bgBround = {
  background: 'url(' + '/robotConfigImg/tucen21.png' + ') no-repeat',
  width: '100%',
  height: '100%',
  backgroundPosition: 'center',
  // backgroundSize: '100% 100%',
};
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const dateFormatList = ['DD-MM-YYYY', 'DD-MM-YY'];
const FormItem = Form.Item;
const { Content, Sider } = Layout;

@connect(({ user }) => ({
  currentUser: user,
}))
class KnowledgeSmartMaintenance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: true,
      count: 0,
      createTime: '',
      countT: '',
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      timea: '',
      timeb: '',
      timec: '',
      cstime: [
        moment(moment().subtract('days', 6).format('YYYY-MM-DD'), dateFormat),
        moment(moment().format('YYYY-MM-DD'), dateFormat),
      ],
      bytime: '',
      excessiveTime: '',
      texta: '导入所有问题',
      // 导入时间参数
      typepd: '',
      createTime1: null,
      count1: '',
      createTime2: null,
      count2: '',
      createTime3: null,
      count3: '',
      successA: '',
      successB: '',
      rightAlist: [],
      rightBlist: [],
      // 问题推荐弹窗
      rightCol1: false,
      rightCol2: false,
      fileList: [],
      percent: 0,
      num: 0,
      percentB: 0,
      numB: 0,
      leftA: true,
      percentC: 0,
      buttonDJ: false,
      clustertaskId: '',
      taskId: '',
    };
  }

  componentDidMount() {
    this.drjl('all');
    this.knowledgeMaintainImportStatus('all');
    this.maintainRecommendStatus();
    this.knowledgeMaintainClusterStatus();
  }

  // 获取问题推荐状态
  maintainRecommendStatus = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/maintainRecommendStatus',
        payload: {},
        callback: res => {
          if (res.status === 'wait') {
            this.setState({ successA: 'wait', rightAlist: res, taskId: res.taskId, });
            this.percent();
          } else {
            this.setState({ successA: res.status, rightAlist: res, login: false, });
          }
        },
      });
    });
  };

  // 进度条任务
  percent = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgerecommendProcess',
        payload: { taskId: this.state.taskId, },
        callback: res => {
          if (res.process === '1.0') {
            this.setState({ num: res.process }, () => {
              this.maintainRecommendStatus();
            });
          } else if (res.process === 0) {
            this.setState({ percent: res.process }, () => {
              setTimeout(() => {
                this.percent();
              }, 1000);
            });
          } else {
            const number = res.process;
            this.setState({ percent: Math.floor(Number(number * 100)) }, () => {
              setTimeout(() => {
                this.percent();
              }, 100);
            });
          }
        },
      });
    });
  };

  // 聚类进度任务
  percentB = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeclusterProcess',
        payload: { taskId: this.state.clustertaskId, },
        callback: res => {
          if (res.process === '1.0') {
            this.setState({ numB: res.process }, () => {
              this.knowledgeMaintainClusterStatus();
            });
          } else if (res.process === 0) {
            this.setState({ percentB: res.process }, () => {
              setTimeout(() => {
                this.percentB();
              }, 1000);
            });
          } else {
            const number = res.process;
            this.setState({ percentB: Math.floor(Number(number * 100)) }, () => {
              setTimeout(() => {
                this.percentB();
              }, 1000);
            });
          }
        },
      });
    });
  };

  // 获取问题聚类状态
  knowledgeMaintainClusterStatus = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeMaintainClusterStatus',
        payload: {},
        callback: res => {
          if (res.status === 'wait') {
            this.setState({ successB: 'wait', rightBlist: res, clustertaskId: res.taskId, });
            this.percentB();
          } else {
            this.setState({ successB: res.status, rightBlist: res }, () => {
              this.init();
            });
          }
        },
      });
    });
  };

  // 去查看详情页面
  checklist = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/capacity/knowledgeSmartMaintenance/CheckList' }));
  };

  // 去黑名单页面
  theBlacklist = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/capacity/knowledgeSmartMaintenance/theBlacklist' }));
  };

  // 刷新导入记录
  drjl = type => {
    const { dispatch, currentUser } = this.props;
    this.setState({ percentC: 99.9, });
    setTimeout(() => {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/maintainImportRecord',
          payload: { type: 'all' },
          callback: res => {
            switch (res.source) {
              case 'UNKNOWN':
                this.setState({ texta: '导入未知问题' });
                break;
              case 'UNSOLVED':
                this.setState({ texta: '导入未解决问题' });
                break;
              case 'ASK_HUMAN':
                this.setState({ texta: '导入转人工问题' });
                break;
              case 'CUSTOM':
                this.setState({ texta: '导入自定义问题' });
                break;
            };
            this.setState({ createTime: res.createTime, countT: res.count, buttonDJ: false, });
          },
        });
      });
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgeMaintainImportTotal',
          payload: {},
          callback: res => {
            this.setState({ count: res.count, leftA: true });
          },
        });
      });
    }, 10);
  };

  // 刷新导入记录
  drj2 = type => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/maintainImportRecord',
        payload: { type },
        callback: res => {
          if (type === 'unknown') {
            this.setState({ createTime1: res.updateTime, count1: res.count });
          } else if (type === 'unresolved') {
            this.setState({ createTime2: res.updateTime, count2: res.count });
          } else if (type === 'askHuman') {
            this.setState({ createTime3: res.updateTime, count3: res.count });
          }
        },
      });
    });
  };

  // 获取状态
  knowledgeMaintainImportStatus = item => {
    const { dispatch, currentUser } = this.props;
    this.setState({ login: true });
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeMaintainImportStatus',
        payload: {},
        callback: res => {
          if (res.status === 'wait') {
            this.setState({ leftA: false, login: false });
            this.percentC();
          } else {
            this.setState({ leftA: true, login: false });
            this.drjl(item);
          }
        },
      });
    });
  };

  // 进度条任务
  percentC = () => {
    const { dispatch, currentUser } = this.props;
    this.setState({ leftA: false });
    setTimeout(() => {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgeMaintainImportProcess',
          payload: {},
          callback: res => {
            if (res.process === 1) {
              this.setState({ numB: res.process }, () => {
                this.drjl();
              });
            } else if (res.process === 0) {
              this.setState({ percentC: res.process }, () => {
                setTimeout(() => {
                  this.setState({ numB: res.process }, () => {
                    this.percentC();
                  });
                }, 1000);
              });
            } else {
              const number = res.process;
              this.setState({ percentC: Math.floor(Number(number * 100)) }, () => {
                setTimeout(() => {
                  this.setState({ numB: res.process }, () => {
                    this.percentC();
                  });
                }, 1000);
              });
            }
          },
        });
      });
    }, 1000);
  };

  knowIssue = () => {
    this.setState({ visible1: true, percentC: 0 }, () => {
      this.drj2('unknown');
    });
  };

  noSolveIssue = () => {
    this.setState({ visible2: true, percentC: 0 }, () => {
      this.drj2('unresolved');
    });
  };

  zrgIsson = () => {
    this.setState({ visible3: true, percentC: 0 }, () => {
      this.drj2('askHuman');
    });
  };

  zdysson = () => {
    this.setState({ visible4: true });
  };

  handleOkA = e => {
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    this.props.form.validateFields((err, values) => {
      // 校验方法
      if (!err) {
        this.setState(
          {
            visible1: false,
            timea: [
              moment(userInfo.coretime1[0]._d).format('YYYY-MM-DD'),
              moment(userInfo.coretime1[1]._d).format('YYYY-MM-DD'),
            ],
          },
          () => {
            const { dispatch, currentUser } = this.props;
            this.setState({ login: true, buttonDJ: true });
            this.reqRef = requestAnimationFrame(() => {
              dispatch({
                type: 'knowledgeSmartMaintenance/importUnknownProblem',
                payload: { from: this.state.timea[0], to: this.state.timea[1] },
                callback: res => {
                  // console.log(res);
                  if (res) {
                    // message.success(`本次成功导入${res.data.count}条未知问题`);
                    this.setState({ login: false, texta: '导入未知问题', typepd: 'all' });
                  };
                  this.drjl('all');
                },
              });
            });
          }
        );
      }
    });
  };

  handleCancelA = e => {
    this.props.form.setFields({ coretime1: '' });
    this.setState({ visible1: false });
  };

  // 导入未解决问题----
  handleOkB = e => {
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    this.props.form.validateFields((err, values) => {
      // 校验方法
      if (!err) {
        this.setState(
          {
            visible2: false,
            timeb: [
              moment(userInfo.coretime2[0]._d).format('YYYY-MM-DD'),
              moment(userInfo.coretime2[1]._d).format('YYYY-MM-DD'),
            ],
          },
          () => {
            // importUnknownProblem
            const { dispatch, currentUser } = this.props;
            this.setState({ login: true, buttonDJ: true });
            this.reqRef = requestAnimationFrame(() => {
              dispatch({
                type: 'knowledgeSmartMaintenance/importUnresolvedProblem',
                payload: { from: this.state.timeb[0], to: this.state.timeb[1] },
                callback: res => {
                  // message.success(`本次成功导入${res.data.count}条未知问题`)
                  this.setState({ login: false, texta: '导入未解决问题', typepd: 'all' });
                  this.drjl('all');
                },
              });
            });
          }
        );
      }
    });
  };

  handleCancelB = e => {
    this.props.form.setFields({ coretime2: '' });
    this.setState({ visible2: false });
  };

  rightCol1 = () => {
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    this.props.form.validateFields((err, values) => {
      // 校验方法
      let a = '';
      let b = '';
      let c = '';
      let d = '';
      if (userInfo.InputNumber1 !== '') {
        a = Number(userInfo.InputNumber1);
      };
      if (userInfo.InputNumber2 !== '') {
        b = Number(userInfo.InputNumber2);
      };
      if (userInfo.xwcs1 !== '') {
        c = Number(userInfo.xwcs1);
      };
      if (userInfo.xwcs2 !== '') {
        d = Number(userInfo.xwcs2);
      };
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgerecommendSubmit',
          payload: {
            includeKey: userInfo.bkKeyword,
            notIncludeKey: userInfo.NoKeyword,
            minWordCount: a,
            maxWordCount: b,
            minAskCount: c,
            maxAskCount: d,
          },
          callback: res => {
            console.log(res);
            if (res.code === 0) {
              message.success(res.msg);
              this.setState({ rightCol1: false, taskId: res.taskId }, () => {
                this.maintainRecommendStatus();
              });
            }
          },
        });
      });
    });
  };

  rightCol2 = () => {
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    this.props.form.validateFields((err, values) => {
      // 校验方法
      let a = '';
      let b = '';
      let c = '';
      let d = '';
      if (userInfo.InputNumber3 !== '') {
        a = Number(userInfo.InputNumber3);
      };
      if (userInfo.InputNumber4 !== '') {
        b = Number(userInfo.InputNumber4);
      };
      if (userInfo.xwcs3 !== '') {
        c = Number(userInfo.xwcs3);
      };
      if (userInfo.xwcs4 !== '') {
        d = Number(userInfo.xwcs4);
      };
      const { dispatch, currentUser } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledclusterSubmit',
          payload: {
            includeKey: userInfo.bkKeyword1,
            notIncludeKey: userInfo.NoKeyword1,
            minWordCount: a,
            maxWordCount: b,
            minAskCount: c,
            maxAskCount: d,
          },
          callback: res => {
            if (res.code === 0) {
              message.success(res.msg);
              this.setState({ rightCol2: false }, () => {
                this.knowledgeMaintainClusterStatus();
              });
            }
          },
        });
      });
    });
  };

  rightColNo2 = () => {
    this.setState({ rightCol2: false });
  };

  rightColNo1 = () => {
    this.setState({ rightCol1: false });
  };

  handleOkC = e => {
    let userInfo = this.props.form.getFieldsValue(); // 获取数据
    this.props.form.validateFields((err, values) => {
      // 校验方法
      if (!err) {
        this.setState(
          {
            visible3: false,
            timec: [
              moment(userInfo.coretime3[0]._d).format('YYYY-MM-DD'),
              moment(userInfo.coretime3[1]._d).format('YYYY-MM-DD'),
            ],
          },
          () => {
            const { dispatch, currentUser } = this.props;
            this.setState({ login: true, buttonDJ: true });
            this.reqRef = requestAnimationFrame(() => {
              dispatch({
                type: 'knowledgeSmartMaintenance/importArtificialProblem',
                payload: { from: this.state.timec[0], to: this.state.timec[1] },
                callback: res => {
                  // message.success(`本次成功导入${res.data.count}条未知问题`)
                  this.setState({ login: false, texta: '导入转人工问题', typepd: 'all' });
                },
              });
            });
          }
        );
      }
    });
  };

  handleCancelC = e => {
    this.props.form.setFields({ coretime3: '' });
    this.setState({ visible3: false, });
  };

  handleOkD = e => { };

  handleCancelD = e => {
    this.setState({ visible4: false, fileList: [] });
  };

  recommendF1 = () => {
    this.setState({ rightCol1: true });
  };

  recommendF2 = () => {
    this.setState({ rightCol2: true });
  };

  // eslint-disable-next-line react/sort-comp
  fetch = () => { };

  // 问题推荐去处理
  recommendFa = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/capacity/knowledgeSmartMaintenance/problemRecommendedList' }));
  };

  // 问题聚类去处理
  recommendFb = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/capacity/knowledgeSmartMaintenance/clusteringProblem' }));
  };

  // 下载模版
  dictTemp = () => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'knowledgeSmartMaintenance/maintainImportTemplate',
      payload: {},
      callback: res => {
        let filename = decodeURIComponent(
          res.requestRes.headers.get('Content-Disposition').split('=')[1]
        );
        download.byBlob(res.fileBlob, filename);
      },
    });
  };

  businessWayA = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      formData.append('file', file.originFileObj);
    });
    this.setState({ uploading: true, });
    this.uploadFile(formData);
  };

  handleCancel = () => {
    this.setState({ visible4: false, uploading: false, fileList: [], percentC: 0 });
  };

  handleUpFile = info => {
    let fileList = [...info.fileList];
    fileList = fileList.slice(-1);

    fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });

    if (fileList[0].size / 1024 / 1024 > 2) {
      // 2000000
      message.error('上传文件超出2M');
      this.setState({ fileList: [], percentC: 0 });
    } else {
      this.setState({ fileList, percentC: 0 });
    }
  };

  uploadFile = data => {
    const token = window.localStorage.getItem('robot_token');
    axios.post('/cloud/learn/knowledge/maintain/import', data, {
      method: 'post',
      processData: false,
      headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token },
    }).then(res => {
      // console.log(res);
      this.setState({ uploading: false, buttonDJ: true, }, () => {
        if (res.data.code != 0) {
          return message.error(res.data.message);
          this.setState({ buttonDJ: false });
        } else {
          this.setState({ percentC: 0, visible: false, visible4: false, fileList: [], page: 1, texta: '导入自定义问题', typepd: 'all', }, () => {
            setTimeout(() => {
              this.setState({ fileList: [] });
            }, 1000);
            if (res.data.data.message) {
              if (res.data.data == 0) {
                return message.error(`导入0条数据，请检查导入数据`);
              };
              message.success(`本次成功导入${res.data.data}条自定义问题`);
            } else {
              message.success('导入成功');
            };
            this.drjl('all');
          });
        }
      });
    }).catch(error => {
      message.error('导入失败请稍等再试');
    });
  };

  init = () => {
    const { rightAlist, rightBlist } = this.state;
    if (rightAlist.questionCount === '0') {
      this.setState({ successA: 'none' });
    };
    if (rightBlist.questionCount === '0') {
      this.setState({ successB: 'none' });
    };
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { uploading, fileList } = this.state;
    const FormItemLayont = {
      labelCol: {
        // 文字
        xs: 24,
        sm: 5,
      },
      wrapperCol: {
        // 输入框
        xs: 24,
        sm: 19,
      },
    };
    // const headData = { "token": JSON.parse(window.localStorage.getItem("currentUser")).token };
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      accept: '.xlsx,.xls',
      fileList,
      onChange: this.handleUpFile,
    };
    const buttonDJ = this.state.buttonDJ ? {} : null;

    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Spin spinning={this.state.login}>
            <div className={styles.backgroundp}>
              <Layout>
                <Sider width="400">
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row className={styles.gutterRow}>
                      <div className={styles.gutterRows}>
                        <div style={{ height: 16 }}></div>
                        <div className={styles.ProblemsKU}>问题库</div>
                        <div style={{ height: 20 }}></div>
                        {this.state.leftA ? (
                          <span style={{ fontSize: 14, color: '#4b5475', textAlign: 'center', fontWeight: 600 }}>已添加问题</span>
                        ) : (
                          <div>
                            <span style={{ fontSize: 12, color: '#000', textAlign: 'center' }}>正在处理导入问题</span>
                            <span className={styles.loading}></span>
                          </div>
                        )}

                        <div style={{ height: 35 }}></div>
                        <div className={styles.bjback}>
                          {/* login */}
                          {this.state.leftA ? (
                            <div style={bgBround}>
                              <div style={{ height: 70 }}></div>
                              <div onClick={this.checklist} className={styles.textZy}>
                                <Statistic
                                  suffix="个"
                                  valueStyle={{ color: '#ff7d27', fontSize: 19 }}
                                  value={this.state.count}
                                />
                              </div>
                            </div>
                          ) : (
                            <div style={{ height: 170 }} className={styles.progrees}>
                              <Progress
                                type="circle"
                                percent={this.state.percentC}
                                width={120}
                                strokeWidth={8}
                              />
                              <div style={{ height: 20 }}></div>
                            </div>
                          )}

                          <div
                            className={styles.flexjz}
                            style={{ padding: '0px 36px', marginBottom: 15 }}
                          >
                            <span style={{ color: '#999999' }}>最近添加</span>
                            <span>
                              {moment(this.state.createTime).format('YYYY-MM-DD HH:mm:ss')}
                            </span>
                          </div>
                          <div className={styles.flexjz} style={{ padding: '0px 36px' }}>
                            <span style={{ color: '#999999' }}>{this.state.texta}</span>
                            <span>{this.state.countT}</span>
                          </div>
                          <div style={{ padding: '20px 36px' }}>
                            <div style={{ borderBottom: '1px dashed #f0f0f0' }}></div>
                          </div>
                          <Row style={{ margin: '0px 36px' }}>
                            <Col onClick={this.checklist} className={styles.quchakan} span={11}>去查看</Col>
                            <Col span={2}></Col>
                            <Col onClick={this.theBlacklist} className={styles.heimingdan} span={11}>黑名单</Col>
                          </Row>
                          <div style={{ height: 20 }}></div>
                          <Row style={{ margin: '0px 36px', borderRadius: '5px' }}>
                            {UserSession.isAdmin() ? null : (
                              <Col style={buttonDJ} className={styles.imga} span={12}>
                                <div>
                                  <div
                                    onClick={this.knowIssue}
                                    style={{
                                      paddingTop: 25,
                                      paddingLeft: 8,
                                      paddingBottom: 25,
                                      cursor: 'pointer',
                                    }}
                                  >
                                    <div className={styles.imgBk}>
                                      <img src={wen1} />
                                    </div>
                                  </div>
                                  <p style={{ color: '#333333' }}>导入未知问题</p>
                                </div>
                              </Col>
                            )}
                            {UserSession.isAdmin() ? null : (
                              <Col style={buttonDJ} className={styles.imgb} span={12}>
                                <div>
                                  <div
                                    onClick={this.noSolveIssue}
                                    style={{
                                      paddingTop: 25,
                                      paddingLeft: 17,
                                      paddingBottom: 25,
                                      cursor: 'pointer',
                                    }}
                                  >
                                    <div className={styles.imgBk}>
                                      <img src={wen2} />
                                    </div>
                                  </div>
                                  <p style={{ color: '#333333' }}>导入未解决问题</p>
                                </div>
                              </Col>
                            )}
                            {/* <Col style={buttonDJ} className={styles.imgc} span={12}>
                              <div>
                                <div onClick={this.zrgIsson} style={{ paddingTop: 25, paddingLeft: 16, paddingBottom: 25, cursor: 'pointer' }}>
                                  <div className={styles.imgBk} >
                                    <img src={wen3} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入转人工问题</p>
                              </div>
                            </Col> */}
                            <Col style={buttonDJ} className={styles.imgd} span={12}>
                              <div>
                                <div
                                  onClick={this.zdysson}
                                  style={{
                                    paddingTop: 25,
                                    paddingLeft: 16,
                                    paddingBottom: 25,
                                    cursor: 'pointer',
                                  }}
                                >
                                  <div className={styles.imgBk}>
                                    <img src={wen4} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入自定义问题</p>
                              </div>
                            </Col>
                            <Col style={{ height: 40 }} span={12}></Col>
                            <Col style={{ height: 40 }} span={12}></Col>
                          </Row>
                        </div>
                      </div>
                    </Row>
                  </div>
                </Sider>
                <Content style={{ marginLeft: 30 }}>
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row className={styles.colorBackground}>
                      <Col style={{ padding: 10 }} xs={24}>
                        <div className={styles.title1}>
                          <div className={styles.round}></div>
                          <span style={{ color: '#4b5475', fontSize: 16, fontWeight: 600 }}>
                            问题推荐
                          </span>
                        </div>
                      </Col>
                    </Row>
                    <Card bordered={false}>
                      <div className={styles.rightBj}>
                        {this.state.successA === 'success' ? (
                          <div style={{ paddingLeft: 40 }} className={styles.tjwca}>
                            <p style={{ color: '#999999' }}>{this.state.rightAlist.startTime}</p>
                            <p
                              style={{ color: '#333333', fontWeight: 600 }}
                            >{`推荐 ${this.state.rightAlist.questionCount} 个问题到 ${this.state.rightAlist.groupCount} 个知识点`}</p>
                            <p style={{ color: '#999999', marginBottom: 0 }}>待处理</p>
                            <div className={styles.tjwcb}>
                              <div style={{ marginRight: 30 }}>
                                <span style={{ color: '#ff7d27', fontSize: 36 }}>
                                  {this.state.rightAlist.waitGroup}
                                </span>{' '}
                                <span style={{ color: '#333333', fontWeight: 600 }}>个知识点</span>
                              </div>
                              <div style={{ marginRight: 30, marginTop: 15 }}>|</div>
                              <div>
                                <span style={{ color: '#ff7d27', fontSize: 36 }}>
                                  {this.state.rightAlist.waitQuestion}
                                </span>{' '}
                                <span style={{ color: '#333333', fontWeight: 600 }}>
                                  个推荐问题
                                </span>
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successA === 'none' ? (
                          <div style={{ width: 390 }}>
                            <div className={styles.tjwcb}>
                              <img src={top} alt="" />
                              <div style={{ marginLeft: 20 }}>
                                将问题库中的问题推荐给知识库中意思相近的知识点
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successA === 'success' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}
                        {this.state.successA === 'none' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}

                        {/* 推荐中 */}
                        {this.state.successA === 'wait' ? (
                          <div className={styles.center}>
                            <Progress type="circle" percent={this.state.percent} width={80} />
                            <span style={{ marginLeft: 20 }}>推荐中</span>
                            <span className={styles.loading}></span>
                          </div>
                        ) : null}

                        {this.state.successA === 'none' ? (
                          <div onClick={this.recommendF1} className={styles.rightButtona}>
                            开始推荐
                          </div>
                        ) : null}
                        {this.state.successA === 'none' ? (
                          <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div>
                        ) : null}
                        {this.state.successA === 'success' ? (
                          <div onClick={this.recommendF1} className={styles.rightButtonx}>
                            重新推荐
                          </div>
                        ) : null}
                        {this.state.successA === 'success' ? (
                          <div
                            onClick={this.recommendFa}
                            className={styles.rightButtona}
                            style={{ marginLeft: 20 }}
                          >
                            去处理
                          </div>
                        ) : null}
                        {/* error */}
                        {this.state.successA === 'error' ? (
                          <div style={{ width: 390 }}>
                            {' '}
                            <div style={{ width: 420 }} className={styles.tjwcb}>
                              <img style={{ width: 50, height: 50 }} src={iconc} alt="" />
                              <div style={{ marginLeft: 20 }}>
                                <div style={{ height: 12 }}></div>
                                <p>抱歉，没有找到合适的推荐问题</p>
                                <p style={{ fontWeight: 600 }}>
                                  您可以在"问题库"中多导入一些相关问题后再进行推荐
                                </p>
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successA === 'error' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}
                        {this.state.successA === 'error' ? (
                          <div onClick={this.recommendF1} className={styles.rightButtonx}>
                            重新推荐
                          </div>
                        ) : null}
                        {this.state.successA === 'error' ? (
                          <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div>
                        ) : null}
                        <div style={{ width: 150 }}></div>
                      </div>
                    </Card>
                  </div>
                  <div style={{ height: 26 }}></div>
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row className={styles.colorBackground}>
                      <Col style={{ padding: 10 }} xs={24}>
                        <div className={styles.title1}>
                          <div className={styles.rounds}></div>
                          <span style={{ color: '#4b5475', fontSize: 16, fontWeight: 600 }}>
                            问题聚类
                          </span>
                        </div>
                      </Col>
                    </Row>
                    <Card bordered={false}>
                      <div className={styles.rightBj}>
                        {this.state.successB === 'none' ? (
                          <div style={{ width: 390 }}>
                            <div style={{ width: 390 }} className={styles.tjwcb}>
                              <img src={topc} alt="" />
                              <div style={{ marginLeft: 20 }}>
                                将问题库中语义相近的问题聚类为不同的问题组
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successB === 'success' ? (
                          <div style={{ paddingLeft: 40 }} className={styles.tjwca}>
                            <p style={{ color: '#999999' }}>{this.state.rightBlist.startTime}</p>
                            <p
                              style={{ color: '#333333', fontWeight: 600 }}
                            >{`将 ${this.state.rightBlist.questionCount} 个问题聚类为 ${this.state.rightBlist.groupCount} 个问题组`}</p>
                            <p style={{ color: '#999999', marginBottom: 0 }}>待处理</p>
                            <div className={styles.tjwcb}>
                              <div style={{ marginRight: 30 }}>
                                <span style={{ color: '#ff7d27', fontSize: 36 }}>
                                  {this.state.rightBlist.waitGroup}
                                </span>{' '}
                                <span style={{ color: '#333333', fontWeight: 600 }}>个问题组</span>
                              </div>
                              <div style={{ marginRight: 30, marginTop: 15 }}>|</div>
                              <div>
                                <span style={{ color: '#ff7d27', fontSize: 36 }}>
                                  {this.state.rightBlist.waitQuestion}
                                </span>{' '}
                                <span style={{ color: '#333333', fontWeight: 600 }}>
                                  个聚类问题
                                </span>
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successB === 'success' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}
                        {this.state.successB === 'none' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}
                        {this.state.successB === 'wait' ? (
                          <div className={styles.center}>
                            <Progress type="circle" percent={this.state.percentB} width={80} />
                            <span style={{ marginLeft: 20 }}>聚类中</span>
                            <span className={styles.loading}></span>
                          </div>
                        ) : null}

                        {this.state.successB === 'none' ? (
                          <div onClick={this.recommendF2} className={styles.rightButtona}>
                            开始聚类
                          </div>
                        ) : null}
                        {this.state.successB === 'none' ? (
                          <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div>
                        ) : null}
                        {this.state.successB === 'success' ? (
                          <div onClick={this.recommendF2} className={styles.rightButtonx}>
                            重新聚类
                          </div>
                        ) : null}
                        {this.state.successB === 'success' ? (
                          <div
                            onClick={this.recommendFb}
                            className={styles.rightButtona}
                            style={{ marginLeft: 20 }}
                          >
                            去处理
                          </div>
                        ) : null}

                        {/* error */}
                        {this.state.successB === 'error' ? (
                          <div style={{ width: 390 }}>
                            <div style={{ width: 420 }} className={styles.tjwcb}>
                              <img style={{ width: 50, height: 50 }} src={iconc} alt="" />
                              <div style={{ marginLeft: 20 }}>
                                <div style={{ height: 12 }}></div>
                                <p>抱歉，没有找到合适的聚类问题</p>
                                <p>您可以在"问题库"中多导入一些相关问题后再进行聚类</p>
                              </div>
                            </div>
                          </div>
                        ) : null}
                        {this.state.successB === 'error' ? (
                          <div style={{ flexBasis: '25%' }}></div>
                        ) : null}
                        {this.state.successB === 'error' ? (
                          <div onClick={this.recommendF2} className={styles.rightButtonx}>
                            重新聚类
                          </div>
                        ) : null}
                        <div style={{ width: 150 }}></div>
                      </div>
                    </Card>
                  </div>
                </Content>
              </Layout>
              <Modal
                className="modelZdy"
                title="导入未知问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible1}
                onOk={this.handleOkA}
                onCancel={this.handleCancelA}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的未知问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime1', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    {this.state.createTime1 ? (
                      <p style={{ color: '#b3b3b3', marginTop: 20 }}>
                        上次导入 : {this.state.createTime1} 期间的{this.state.count1}条未知问题
                      </p>
                    ) : ''}
                  </Col>
                </Row>
              </Modal>

              <Modal
                className="modelZdy"
                title="导入未解决问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible2}
                onOk={this.handleOkB}
                onCancel={this.handleCancelB}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的未解决问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime2', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    {this.state.createTime2 ? (
                      <p style={{ color: '#b3b3b3', marginTop: 20 }}>
                        上次导入 : {this.state.createTime2} 期间的{this.state.count2}条未解决问题
                      </p>
                    ) : ''}
                  </Col>
                </Row>
              </Modal>

              <Modal
                className="modelZdy"
                title="导入转人工问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible3}
                onOk={this.handleOkC}
                onCancel={this.handleCancelC}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的转人工问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime3', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    {this.state.createTime3 ? (
                      <p style={{ color: '#b3b3b3', marginTop: 20 }}>
                        上次导入 : {this.state.createTime3} 期间的{this.state.count3}转人工问题
                      </p>
                    ) : ''}
                  </Col>
                </Row>
              </Modal>

              <Modal
                className="modelZdy"
                title="导入自定义问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible4}
                onCancel={this.handleCancelD}
                footer={[
                  <Button key="back" onClick={this.handleCancel}>
                    取消
                  </Button>,
                  <Button
                    key="submit"
                    type="primary"
                    loading={uploading}
                    disabled={fileList.length === 0}
                    onClick={this.businessWayA}
                  >
                    {uploading ? '导入中' : '开始导入'}
                  </Button>,
                ]}
              >
                <Row>
                  <Col span={24}>
                    <div style={{ float: 'left', marginRight: 10 }}>选择要导入的问题文件</div>
                    <div
                      onClick={this.dictTemp}
                      style={{ color: '#26cbff', cursor: 'pointer', float: 'right' }}
                    >
                      下载导入模版
                    </div>
                    <div>
                      <Upload {...props} fileList={this.state.fileList}>
                        <Button className={styles.float}>
                          <Icon type="upload" /> 选择文件
                        </Button>
                      </Upload>
                    </div>
                    <div style={{ height: 20 }}></div>
                  </Col>
                </Row>
              </Modal>

              <Modal
                className="modelZdy"
                title="选择待推荐问题"
                okText="确认"
                cancelText="取消"
                visible={this.state.rightCol1}
                onOk={this.rightCol1}
                onCancel={this.rightColNo1}
              >
                <Row>
                  <Col span={24}>
                    <p>将问题库中满足以下条件的问题进行问题推荐:</p>
                    <Form layout="horizontal">
                      <FormItem label="包含关键词" {...FormItemLayont}>
                        {getFieldDecorator('bkKeyword', {
                          initialValue: '',
                        })(<Input placeholder="多个关键字之间用空格分开"></Input>)}
                      </FormItem>
                      <FormItem label="不含关键词" {...FormItemLayont}>
                        {getFieldDecorator('NoKeyword', {
                          initialValue: '',
                        })(<Input placeholder="多个关键字之间用空格分开"></Input>)}
                      </FormItem>
                      <FormItem label="字数" {...FormItemLayont}>
                        {getFieldDecorator('InputNumber1', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最小值"
                            style={{ width: 90 }}
                          />
                        )}
                        <span> — </span>
                        {getFieldDecorator('InputNumber2', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最大值"
                            style={{ width: 90 }}
                          />
                        )}
                      </FormItem>
                      <FormItem label="询问次数" {...FormItemLayont}>
                        {getFieldDecorator('xwcs1', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最小值"
                            style={{ width: 90 }}
                          />
                        )}
                        <span> — </span>
                        {getFieldDecorator('xwcs2', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最大值"
                            style={{ width: 90 }}
                          />
                        )}
                      </FormItem>
                      <p style={{ color: '#d3d3d3', marginLeft: 30 }}>
                        若不设置任何条件则将对问题库中所有问题进行推荐
                      </p>
                    </Form>
                  </Col>
                </Row>
              </Modal>

              <Modal
                className="modelZdy"
                title="选择待聚类问题"
                okText="确认"
                cancelText="取消"
                visible={this.state.rightCol2}
                onOk={this.rightCol2}
                onCancel={this.rightColNo2}
              >
                <Row>
                  <Col span={24}>
                    <p>将问题库中满足以下条件的问题进行问题推荐:</p>
                    <Form layout="horizontal">
                      <FormItem label="包含关键词" {...FormItemLayont}>
                        {getFieldDecorator('bkKeyword1', {
                          initialValue: '',
                        })(<Input placeholder="多个关键字之间用空格分开"></Input>)}
                      </FormItem>
                      <FormItem label="不含关键词" {...FormItemLayont}>
                        {getFieldDecorator('NoKeyword1', {
                          initialValue: '',
                        })(<Input placeholder="多个关键字之间用空格分开"></Input>)}
                      </FormItem>
                      <FormItem label="字数" {...FormItemLayont}>
                        {getFieldDecorator('InputNumber3', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最小值"
                            style={{ width: 90 }}
                          />
                        )}
                        <span> — </span>
                        {getFieldDecorator('InputNumber4', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最大值"
                            style={{ width: 90 }}
                          />
                        )}
                      </FormItem>
                      <FormItem label="询问次数" {...FormItemLayont}>
                        {getFieldDecorator('xwcs3', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最小值"
                            style={{ width: 90 }}
                          />
                        )}
                        <span> — </span>
                        {getFieldDecorator('xwcs4', {
                          initialValue: '',
                        })(
                          <InputNumber
                            min={0}
                            max={100}
                            placeholder="最大值"
                            style={{ width: 90 }}
                          />
                        )}
                      </FormItem>
                      <p style={{ color: '#d3d3d3', marginLeft: 30 }}>
                        若不设置任何条件则将对问题库中所有问题进行推荐
                      </p>
                    </Form>
                  </Col>
                </Row>
              </Modal>
            </div>
          </Spin>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(KnowledgeSmartMaintenance));
